.process-node {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  display: flex;
  background: #fff;
  border: 0.1em solid #8c96aa;
  text-align: center;
  align-items: center;
  border-radius: 4px;
  padding: 0 12px;

  .task-node-icon {
    font-size: 20px;
    line-height: 1;
    color: #245bdb;
    vertical-align: -0.225em;
    .svg-icon {
      width: 24px;
      height: 24px;
    }
  }

  .task-node-label {
    display: inline-block;
    flex: 1 0 0;
    font-size: 14px;
    text-align: left;
    margin-left: 4px;

    .node-icon-extra {
      position: absolute;
      left: 0;
      top: 50px;
      padding: 4px;
      font-size: 12px;
      color: #333333;

      .node-icon {
        flex: 0 0 16px;
        .svg-icon {
          width: 16px;
          height: 16px;
        }
      }
    }
  }

  .task-node {
    font-size: 20px;
    color: #f8f8f8;

    .svg-icon {
      width: 24px;
      height: 24px;
      vertical-align: -0.1em;
    }
  }

  &.node-circle {
    border-radius: 50%;

    .node-icon {
      font-size: 24px;
      margin: 0 auto;
    }
  }

  &.node-rect {
    .node-icon-extra {
      position: absolute;
      left: 0;
      top: 50px;
      padding: 4px;
      font-size: 12px;
      color: #333333;

      .node-icon {
        flex: 0 0 16px;

        .svg-icon {
          width: 16px;
          height: 16px;
        }
      }
    }

    .node-icon {
      flex: 0 0 24px;
    }
  }

  .node-icon {
    font-size: 24px;
    color: #245bdb;

    .svg-icon {
      width: 24px;
      height: 24px;
      vertical-align: -0.1em;
    }
  }

  // 当前节点
  &.process-node-state-run {
    background: #b00015;
    border: 0.1em solid rgba(0, 0, 0, 0.2);

    .node-icon {
      color: #ffffff;
    }

    .task-node-label {
      color: #ffffff;
    }
  }

  &.process-node-state-subrun {
    background: #b00015;
    border: 0.1em solid rgba(0, 0, 0, 0.2);

    .node-icon {
      color: #ffffff;
    }

    .task-node-label {
      color: #ffffff;
    }
  }

  // 已过节点
  &.process-node-state-over {
    background: #0abf96;

    border: 0.1em solid rgba(0, 0, 0, 0.2);

    .node-icon {
      color: #ffffff;
    }

    .task-node-label {
      color: #ffffff;
    }
  }
  &.process-node-state-subover {
    background: #0abf96;

    border: 0.1em solid rgba(0, 0, 0, 0.2);

    .node-icon {
      color: #ffffff;
    }

    .task-node-label {
      color: #ffffff;
    }
  }

  // 失效节点
  &.process-node-state-05 {
    background: #8c96a2;
    border: 0.1em solid rgba(0, 0, 0, 0.2);

    .node-icon {
      color: #ffffff;
    }

    .task-node-label {
      color: #ffffff;
    }
  }

  // 下一节点
  &.process-node-state-08 {
    background: #ed9223;
    border: 0.1em solid rgba(0, 0, 0, 0.2);

    .node-icon {
      color: #ffffff;
    }

    .task-node-label {
      color: #ffffff;
    }
  }

  // 未到节点
  &.process-node-state-norun {
    background: #ffffff;
    border: 0.1em solid #8c96aa;
  }
}
